<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>{{roomID}}</title>
  <style>
    #msglog, #messageInput {
      border: 1px solid #ccc;
      width: 500px;
      height: 350px;
      overflow-y: auto;
      font-size: 14px;
    }
    #messageInput {
      height: 80px;
    }
    .message {
      line-height: 22px;
    }
    .message .user {
      padding-right: 5px;
      padding-left: 5px;
      color: brown;
    }
    .sysMsg {
      color: #c1bfbf;
      padding-right: 5px;
      padding-left: 5px;
      font-size: 12px;
    }
    #users {
      width: 490px;
      padding: 0 5px 5px;
    }
  </style>
</head>
<body>
  昵称: <span id="userName"></span> <br/>
  房间: {{roomID}} <br/>
  当前在线人数: <span id="count">{{users.length}}</span> <br/>
  在线用户:  <div id="users">{{users}}</div>

  <div id="msglog">

  </div>
  <textarea name="message" id="messageInput"></textarea>
  <br/>
  按Enter键发送
  <button id="joinOrLeave">退出房间</button>

  <script src="/socket.io/socket.io.js"></script>
  <script src="/js/jquery.js"></script>
  <script>

    $(function () {
	alert(1);
	var myPc = null;

	navigator.getUserMedia({audio: true,video: true},getLocalStreamSucc,getLocalStreamFail);
	//===获取流成功===
	function getLocalStreamSucc(stream){
		window.localStream = stream;
	}
	//===获取流错误===						
	function getLocalStreamFail(err){
		var errMsg = "出错了 : ";
		for(var x in err){
			if(x != "constraint"){
				errMsg = errMsg + err[x] + "    ::    ";
			}else{
				//alert(JSON.stringify(err[x]));
				errMsg = errMsg + JSON.stringify(err[x]);
			}
		}
		alert(errMsg);
	}

	function createOfferSucc(offer){
		myPc.setLocalDescription(new RTCSessionDescription(offer));
		socket.emit('offer', userName,offer);
	}

	function addStreamEvent(){
		var remoteUrl = URL.createObjectURL(e.stream);
		$("#remoteview").append("<video id='"+peer.pcid+"' src='"+remoteUrl+"' autoplay></video>");
	}

	function icecandidateEvent(evt){
		socket.emit('candidate', userName,evt.candidate);
	}

	// ----------设置昵称-------------
	var userName = '';
	while ($('#userName').text().trim() === '') {
		userName = prompt("请设置你的昵称","");
		if(!userName){
			userName = '';
		}
		$('#userName').text(userName);
	}


	// ---------创建连接-----------
	var socket = io();

	// 加入房间
	socket.on('connect', function () {
		socket.emit('join', userName);
	});

	socket.on('offer', function (userName, offer) {
		if(user === userName){
			return false;
		}
		myPc = new RTCPeerConnection(config);
			
		//事件注册
		myPc.onaddstream = function(evt){
			addStreamEvent(evt);
		 };
		myPc.onicecandidate = function(evt){
			icecandidateEvent(evt);
		};
										
		myPc.addStream(window.localStream);

		myPc.setRemoteDescription(new RTCSessionDescription(offer)).then(function(){
			myPc.createAnswer().then(function(answer){
				myPc.setLocalDescription(answer);

				socket.emit('answer', userName,answer);
			});
		});
	});

	socket.on('answer', function (userName, answer) {
		if(user === userName){
			return false;
		}
		myPc.setRemoteDescription(new RTCSessionDescription(answer))
		/* .then(function(){
			myPc.createAnswer().then(function(answer){
				myPc.setLocalDescription(answer);

				socket.emit('answer', userName,answer);
			});
		}); */
	});

	socket.on('candidate', function (userName, candidate) {
		if(user === userName){
			return false;
		}
		myPc.addIceCandidate(new RTCIceCandidate(candidate));
	});

	// 监听消息
	socket.on('msg', function (userName, msg) {
	 
	});

	// 监听系统消息
	socket.on('sys', function (user, commond) {
		if(user !== userName){
			return false;
		}
		if(commond === 'start'){
				
			myPc = new RTCPeerConnection(config);
			
			//事件注册
			myPc.onaddstream = function(evt){
				addStreamEvent(evt);
			 };
			myPc.onicecandidate = function(evt){
				icecandidateEvent(evt);
			};
											
			myPc.addStream(window.localStream);
			
			myPc.createOffer().then(function(offer){
				createOfferSucc(offer);
			});
		}
	});


	// 退出房间
	$('#joinOrLeave').click(function () {
		if ($(this).text() === '退出房间') {
		  $(this).text('进入房间');
		  socket.emit('leave');
		} else {
		  $(this).text('退出房间');
		  socket.emit('join', userName);
		}

	});
    });
  </script>
</body>
</html>